<template>
    <div class="list-box-con">
        <div class="top">
            <div class="stick"></div>
            <div class="ball"></div>
        </div>
        <div class="inner-con">
            <div class="inner">
                <slot></slot>
            </div>
        </div>
        <div class="top">
            <div class="stick"></div>
            <div class="ball"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "YorhaListBox"
}
</script>

<script setup>
import YorhaTree from "../YorhaTree/YorhaTree.vue";
import {reactive} from "vue";

let props = defineProps(['width', 'height', 'data'])



</script>

<style lang="less" scoped>
@import "../../style";

.list-box-con {
    background: @yellowWhite;
    width: 500px;
    height: 470px;
    box-shadow: 2px 2px 0px @yellow;

    & > .top {
        width: 100%;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > .stick {
            width: calc(100% - 34px);
            height: 2px;
            background: @darkYellow;
            box-sizing: border-box;
            margin-left: 8px;
        }

        & > .ball {
            width: 26px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            &::after {
                content: '';
                width: 4px;
                height: 4px;
                border-radius: 2px;
                background: @darkYellow;
            }
        }
    }

    & > .inner-con {
        width: 100%;
        height: calc(100% - 32px);
        box-sizing: border-box;
        padding: 0 5px 0 0;


        & > .inner {
            overflow-y: scroll;
            overflow-x: hidden;
            width: 100%;
            height: 100%;
            padding: 0 5px 0 0;
            box-sizing: border-box;
        }
    }
}

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background-color: @yellowWhite; /*滚动条槽的颜色*/
}

::-webkit-scrollbar-thumb {
    background-color: rgb(70, 68, 61);
}
</style>